<template>
  <div class="team" id="team" >
    <div class="container w " >
      <Title :data="titleData" />
      <ul class="wow animate__fadeInUp" data-wow-duration="2s"  >
        <li v-for="(item,index) in 3" :key="index">
          <img :src="require(`./images/team-${index+1}.jpg`)" alt="" />
          <div class="info">
            <h4>Walter White</h4>
            <span>Chief Executive Officer</span>
            <div class="social" v-if="true">
              <a href=""><span class="iconfont">&#xe652;</span></a>
              <a href=""><span class="iconfont">&#xe633;</span></a>
              <a href=""><span class="iconfont">&#xe87f;</span></a>
              <a href=""><span class="iconfont">&#xe6a7;</span></a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Title from "../Title";
export default {
  components: { Title },
  data() {
    return {
      titleData: {
        title: "Team",
        text: "Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.",
      },
			show:false,
    };
  },
	mounted(){
		this.$wow.init()
	}
};
</script>

<style lang="less" scoped>
.team {
	margin-bottom: 90px;
  .container {
    ul {
      display: flex;
      justify-content: space-between;
      li {
        flex: 1;
        margin: 0 12px;
        position: relative;
        img {
          width: 100%;
        }
        .info {
          position: absolute;
          top: 85%;
          left: 20px;
          right: 20px;
          background: #fff;
          padding: 20px 0;
          color: #2f4d5a;
          box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
          max-height: 50px;
          overflow: hidden;
          transition: max-height 0.5s ease-in-out;
          text-align: center;
          h4 {
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 16px;
            color: #2f4d5a;
            position: relative;
            padding-bottom: 10px;
            &::after {
              content: "";
              position: absolute;
              display: block;
              width: 50px;
              height: 1px;
              background: #b1cbd7;
              bottom: 0;
              left: calc(50% - 25px);
            }
          }
          span {
            font-style: italic;
            display: block;
            font-size: 13px;
          }
          .social {
            display: flex;
            justify-content: center;
            margin-top: 15px;
            a {
              transition: color 0.3s;
              color: #52869d;
							margin: 0 5px;
							&:hover{
								color: #67b0d1;
							}
							span{
								font-size: 16px;
								font-style: normal;
							}
            }
          }
        }
				&:hover .info{
					max-height: 95px;
				}
      }
    }
  }
}
</style>